@for $i from 0 through 60 {
  .fs#{$i} {
    font-size: 1px * $i;
  }
  .mt#{$i} {
    margin-top: 1px * $i;
  }
  .mb#{$i} {
    margin-bottom: 1px * $i;
  }
  .ml#{$i} {
    margin-left: 1px * $i;
  }
  .mr#{$i} {
    margin-right: 1px * $i;
  }
  .pt#{$i} {
    padding-top: 1px * $i;
  }
  .pb#{$i} {
    padding-bottom: 1px * $i;
  }
  .pl#{$i} {
    padding-left: 1px * $i;
  }
  .pr#{$i} {
    padding-right: 1px * $i;
  }
  .br#{$i} {
    border-radius: 1px * $i !important;
  }
}

.z10 {
  position: relative;
  z-index: 10;
}

.z20 {
  position: relative;
  z-index: 20;
}

.z50 {
  position: relative;
  z-index: 50;
}

.z100 {
  position: relative;
  z-index: 100;
}

.cur {
  cursor: pointer;
}

.df {
  display: flex;
}

.dif {
  display: inline-flex;
}

.fdc {
  flex-direction: column;
}

.jc-sb {
  justify-content: space-between;
}

.fwb {
  font-weight: bolder;
}

.fw400 {
  font-weight: 400;
}

.fw600 {
  font-weight: 600;
}

.aic {
  align-items: center;
}
